<template>
	<div class="Sing">
		<div class="gun">
		<marquee behavior="scroll" direction="left" loop="infinite" scrollamount="10" >
		  <img src="../assets/img/pubu.jpg" width="750rem" height="750rem">
		   <img src="../assets/img/pubu.jpg" width="750rem" height="750rem">
			<img src="../assets/img/pubu.jpg" width="750rem" height="750rem">
			<img src="../assets/img/pubu.jpg" width="750rem" height="750rem">
		</marquee>
		</div>
		<div class="bg">
			<div class="box">
			<p class="f1">音街</p>
			<p class="f1">年轻人都在玩的K歌app</p><br/><br/>
			<p class="f2">超过1000+网易知名音乐人已入驻音街</p>
			<p class="f2">平台累积优质作品量10万+，一起创作吧！</p><br/><br/>
			<van-button round type="default" style="width: 8rem;">
				<img src="../assets/img/tj_app.png" width="100rem" height="20rem">
			</van-button>
			</div>
		</div>


	</div>
</template>

<script>
	export default {
		name: 'Sing',
		data() {
			return {
				images: [{
						src: require('../assets/img/pubu.jpg'),
					},
					{
						src: require('../assets/img/pubu.jpg'),
					},
				],
			}
		},
	}
</script>

<style scoped>
	/* .gun{
		position: absolute;
		top:0px;
		left:-1000px;
	} */
	.img{
		z-index: -1;
	}
	.bg{
		position: absolute;
		top:0rem;
		left:0rem;
		z-index: 999;
		height: 19rem;
		width: 10rem;
		background-image: linear-gradient(to top, rgba(232,85,136,1), rgba(121,111,255,0.5), rgba(255,255,255,0));
	}
	.box{
		position: relative;
		top:11rem;
		left:1rem;
	}
.f1{
	color:#fff;
	font-size: .7rem;
}
.f2{
	color:#fff;
	font-size: .3rem;
}

</style>
